<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏轮播</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: linear-gradient(200deg, rgba(224, 192, 255, 0.451), #918ef9);
    }

    .item {
        width: 240px;
        height: 160px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        border-radius: 10px;
        background-color: pink;
        /* 过度铺满 */
        background-size: cover;
        background-position: center;
        transition: 1s;
    }

    .item:nth-child(1),
    .item:nth-child(2) {
        /* 通过后续的js将不同的照片放到首位和第二位,从而实现更换照片的时候选中第一张和第二章
        第一张放在下面当背景图片,第二章放在上面当全屏图片,通过两个图片叠加可以在更换图的时候显得自然 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translateY(0);
        box-shadow: none;
        border-radius: 0;
        /* 第一张和第二章图片是为了铺满屏幕 */
    }

    .item:nth-child(3) {
        left: 65%;
    }

    .item:nth-child(4) {
        left: calc(65% + 245px);
    }

    .item:nth-child(5) {
        left: calc(65% + 490px);
    }

    .item:nth-child(6) {
        left: calc(65% + 685px);
        opacity: 0;
    }

    .item {
        box-shadow: 0 30px 50px #505050;
    }

    .button {
        width: 100%;
        position: absolute;
        bottom: 50px;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .button div {
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 5px;
        margin: 0 25px;
        transition: .5s;
        cursor: pointer;
        user-select: none;
        font-size: 20px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }
</style>

<body>
    <div class="container">
        <div class="slide">
            <div class="item" style="background-image: url('../img/1.jpg');"></div>
            <div class="item" style="background-image: url('../img/3.jpg');"></div>
            <div class="item" style="background-image: url('../img/2.jpg');"></div>
            <div class="item" style="background-image: url('../img/4.png');"></div>
            <div class="item" style="background-image: url('../img/5.jpg');"></div>
            <div class="item" style="background-image: url('../img/6.jpg');"></div>
        </div>
        <div class="button">
            <div class="left">上一张</div>
            <div class="cnt">下载</div>
            <div class="right">下一张</div>
        </div>
    </div>
    <script>
        // 防抖函数 做节流处理
        const debounce = (fn, time = 1000) => {
            let timer
            return (...arges) => {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn(...arges)
                }, time)
            }
        }
        //获取dom
        const leftBtn = document.querySelector(".button .left")
        const rightBtn = document.querySelector(".button .right")
        const slide = document.querySelector(".slide")
        //注册点击事件
        function lfBtn(){
            //获取所有的item,形成一个数组
            const items = document.querySelectorAll(".item")
            //prepend函数，将数组中最后一个元素添加到开头位置
                slide.prepend(items[items.length - 1])
        }
        function rgBtn(){
            //获取所有的item,形成一个数组
            const items = document.querySelectorAll(".item")
            // 将数组中第一个添加到slide之中,从而形成将下一张图片放到全屏的位置
                slide.appendChild(items[0])
        }
        leftBtn.addEventListener("click", debounce(lfBtn, 300))
        rightBtn.addEventListener("click", debounce(rgBtn, 300))
    </script>
</body>

</html>